<template>
	<div class="app-after-time">
		<span v-if="diffTime == 'minutes'"
			>{{ curvalue }}{{ $t('common.aftertime.minutesago') }}</span
		>
		<span v-if="diffTime == 'hours'"
			>{{ curvalue }}{{ $t('common.aftertime.hoursago') }}</span
		>
		<span v-if="diffTime == 'days'"
			>{{ curvalue }}{{ $t('common.aftertime.dayago') }}</span
		>
		<span v-if="diffTime == 'mouth'"
			>{{ curvalue }}{{ $t('common.aftertime.monthsago') }}</span
		>
		<span v-if="diffTime == 'years'"
			>{{ curvalue }}{{ $t('common.aftertime.yearsago') }}</span
		>
		<span v-if="!diffTime">&nbsp;</span>
	</div>
</template>
<script lang="ts" setup>
import { Ref } from 'vue';
import { spanAfterTimeProps } from './span-aftertime';
import { useEditorTypeParams } from '@/hooks/use-editor';
const props = defineProps(spanAfterTimeProps);
const diffTime: Ref<any> = ref(null);
const curvalue: Ref<any> = ref(null);
// 类型校验
const { validateConfig } = useEditorTypeParams();
validateConfig();
watch(
	() => props.value,
	(newVal: any, oldVal: any) => {
		transTime();
	}
);

onBeforeMount(() => {
	transTime();
});

const transTime = () => {
	if (props.value) {
		// let dateString: any = 'YYYY年MM月DD日' || 'YYYY年MM月DD日 HH时mm分ss秒' || 'YYYY-MM-DD HH:mm:ss' || 'YYYY-MM-DD' || 'YYYY/MM/DD HH:mm:ss' || 'YYYY/MM/DD';
		let oldTime = new Date(props.value).valueOf();
		let nowTime = new Date().valueOf();
		let tempDiffTime = nowTime - oldTime;
		if (tempDiffTime < 3600000) {
			curvalue.value = Math.ceil(tempDiffTime / 60000) + '';
			diffTime.value = 'minutes';
		} else if (tempDiffTime < 86400000) {
			curvalue.value = Math.ceil(tempDiffTime / 3600000) + '';
			diffTime.value = 'hours';
		} else if (tempDiffTime < 2592000000) {
			curvalue.value = Math.floor(tempDiffTime / 86400000) + '';
			diffTime.value = 'days';
		} else if (tempDiffTime < 31104000000) {
			curvalue.value = Math.floor(tempDiffTime / 2592000000) + '';
			diffTime.value = 'mouth';
		} else {
			curvalue.value = Math.floor(tempDiffTime / 31104000000) + '';
			diffTime.value = 'years';
		}
	}
};
</script>
